<template>
  <div class="animal-article-box flex-col-start">
    <!--        顶部-->
    <div class="animal-article-box-head flex-row-center">
      <!--            背景图-->
      <div :style="{filter:getSurviveFilter}"
           class="animal-article-box-head-img-container flex-col-center"
      >
        <!--                 :style="{backgroundImage: getAnimalBackgroundImage,filter:getSurviveFilter}">-->
        <YImage :src="animal.image" class="animal-article-box-head-img"></YImage>
        <div>
          <span v-show="animal.surviveStatus===0"> (已逝喵/汪星)</span>
        </div>
      </div>

    </div>
    <!--        身体-->
    <div class="animal-article-box-body flex-col-center">
      <div class="animal-article-box-body-container flex-col-center">
        <div style="width: 80%;text-align: left;font-size: 25px;margin-top: 30px">
          基本信息
        </div>
        <div style="width: 70%;min-width: 350px">
          <div class="animal-article-row">
            <FieldItem :value="animal.name" class="animal-article-fieldItem" color="#008484" field="昵称"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="getSex" class="animal-article-fieldItem" color="#008484" field="性别"></FieldItem>
          </div>
          <div class="animal-article-row flex-row-between">
            <FieldItem :value="getAdopt" class="animal-article-fieldItem" color="#008484" field="领养状态"></FieldItem>
            <button v-if="animal.adoptStatus!==1" class="animal-article-adopbtn teal-btn">我要领养</button>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="getSterilizationStatus" class="animal-article-fieldItem" color="#008484"
                       field="绝育状态"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="getExistStatus" class="animal-article-fieldItem" color="#008484"
                       field="生存状态"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="animal.school.schoolName+'('+animal.campus.name+')'" class="animal-article-fieldItem" color="#008484"
                       field="学校"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="animal.area.name" class="animal-article-fieldItem" color="#008484"
                       field="所在地"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="animal.birthday" class="animal-article-fieldItem" color="#008484"
                       field="生日"></FieldItem>
          </div>
          <div class="animal-article-row">
            <FieldItem :value="animal.des" class="animal-article-fieldItem" color="#008484" field="简介"></FieldItem>
          </div>
        </div>

      </div>
    </div>

    <!--        底部-->
    <div class="animal-article-box-bottom flex-col-start">
      <div class="animal-article-box-bottom-container flex-col-center">
        <div class="animal-article-box-bottom-row flex-row-between" style="font-size: 25px;">
          <div>{{ animal.name }}的相册</div>
          <el-button icon="el-icon-plus" plain type="success">上传</el-button>
        </div>
        <el-empty v-show="picturePageObj.size===0" :image-size="200"></el-empty>
        <div v-for="(item,index) in picturePageObj.list" class="animal-article-box-bottom-row">
          <PhotoAlbum :list="item"></PhotoAlbum>

          <div v-if="item.pictureList && item.pictureList.length>6" class="flex-row-end" style="width: 100%;">
            <el-link class="animal-article-box-bottom-row-a" href="https://element.eleme.io" target="_blank">查看更多
            </el-link>
          </div>
        </div>

      </div>
    </div>
    <RoundMenu :menu-list="roundMenuList" class="menu" icon="el-icon-menu" @click="handleClickRoundMenu"></RoundMenu>

    <div class="animal-article-bottom flex-col-start">
      <YComment class="animal-article-comment"></YComment>
      <!--        <CommentBox></CommentBox>-->
    </div>
  </div>
</template>

<script>

import YImage from "@/components/image/YImage";
import FieldItem from "@/components/animal/FieldItem";
import PhotoAlbum from "@/components/image/PhotoAlbum";

import AnimalApi from "@/api/animal/AnimalApi";
import YComment from "@/components/Comment/YComment.vue";
import RoundMenu from "@/components/Menu/RoundMenu.vue";

export default {
  name: "AnimaInfo",
  components: {RoundMenu, YComment, PhotoAlbum, FieldItem, YImage},
  data() {

    return {
      animal: {
        id: 0,
        name: "焦糖",
        sex: 0,
        des: "贪吃猫,摆烂猫",
        school: {
          schoolName: "北京大学"
        },
        campus: {
          name: "航空港校区"
        },
        area: {
          name: "16栋"
        },
        birthday: "2020-11-21",
        image: "https://img.zcool.cn/community/01d57159117b35a801216a3ee8afcc.jpg@1280w_1l_2o_100sh.jpg",
        // icon:"http://www.youlibin.top:8090/image/934453e.jpg.jpg",
        address: "四川省成都市成都信息工程大学21栋附近",
        existStatus: 1,
        adoptStatus: 0,
        sterilizationStatus: 0
      },
      picturePageObj: {
        list: [
          {
            time: "2022-10-14",
            src: [
              "https://img.zcool.cn/community/016dd959117b27a801216a3e5506ef.jpg@1280w_1l_2o_100sh.jpg",
              "https://ts1.cn.mm.bing.net/th/id/R-C.7c4a1b3b6990ac721cca9e7ae03a2529?rik=ihC5JDh0qtafug&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f20120508BZ-YB%2f7q.jpg&ehk=7F3HCtI%2byCmJSYu6rYlezLLAcBRd0NttlML7gLSpMKg%3d&risl=&pid=ImgRaw&r=0"
            ]
          },
          {
            time: "2022-9-20",
            src: [
              "https://pic2.zhimg.com/v2-fc06d1898f8602fbd2042170ee596cea_r.jpg",
              "https://tse4-mm.cn.bing.net/th/id/OIP-C.cxw7nzd7CI_-LXBjF9f_7gHaE8?pid=ImgDet&rs=1"
            ]
          }
        ]
      },
      roundMenuList: [
        {
          icon: 'el-icon-tickets',
          content: '申领',
          click: this.handleRequestAdopt
        }
        , {
          icon: 'el-icon-headset',
          content: "反馈",
          click: this.handleFeedback
        }
      ]
    }
  },
  methods: {
    // 申请领养
    handleRequestAdopt() {
      this.$msg.success("申领成功")
    },
    handleFeedback() {
      this.$msg.success("反馈成功")
    },

    getAnimalInfo() {
      AnimalApi.getAnimalInfoById(this.animal.id).then(resp => {
        if (resp.code === 200) {
          this.animal = resp.data.animal
          this.animal.school = resp.data.school
          this.animal.campus = resp.data.campus
          this.animal.area = resp.data.area

        }
      })
    },
    getAnimalPictureList() {
      AnimalApi.getAnimalPictureListById(this.animal.id).then(resp => {
        if (resp.code === 200) {
          this.picturePageObj = resp.data

        }
      })
    },
    handleClickRoundMenu(item) {
      console.log(item)
      let fun = item.click
      fun()
    }

  },
  computed: {
    getAnimalBackgroundImage() {

      return 'url(' + this.animal.image + ')'
    },
    getExistStatus() {
      let surviveStatus = this.animal.surviveStatus;
      if (surviveStatus === 0) {
        return '死亡'
      } else {
        return '生存'
      }
    },
    getSex() {
      if (this.animal.sex === 0) {
        return '母'
      } else {
        return '公'
      }
    },
    getAdopt() {
      if (this.animal.adoptStatus === 0) {
        return '未领养'
      } else if (this.animal.adoptStatus === 1) {
        return '已领养'
      }
    },
    getSterilizationStatus() {
      if (this.animal.existStatus === 0) {
        return '未绝育'
      } else if (this.animal.existStatus === 1) {
        return '已绝育'
      } else {
        return '未知'
      }
    },
    getSurviveFilter() {
      let surviveStatus = this.animal.surviveStatus;
      if (surviveStatus === 0) {
        return 'grayscale(1)'
      } else {
        return 'none'
      }

    },

  },
  mounted() {
    let id = this.$route.params.id
    this.animal.id = id
    this.getAnimalInfo()
    this.getAnimalPictureList()
  }
}
</script>

<style scoped lang="less">
@Common-width: 100vw*0.7px;
@Head-Image-width: 250px;
.animal-article-box {
  width: 100%;
  min-height: 100%;
  min-width: 350px;
  background-color: skyblue;

  .animal-article-box-head {
    flex: 1 1 300px;
    width: 100%;
    border-radius: 5px;

    .animal-article-box-head-img-container {
      width: 70%;
      min-width: 350px;
      height: 80%;
      min-height: 300px;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center center;
      border-radius: 5px;
      background-color: #FFFFFF;

      margin: 50px 0 50px 0;
      position: relative;

      div {
        z-index: 2;
      }

      .animal-article-box-head-img {
        width: @Head-Image-width;
        height: @Head-Image-width;
        border: 3px solid teal;
        border-radius: 50%;

      }
    }

    .animal-article-box-head-img-container:before {
      content: "";
      position: absolute; /* 一定要用绝对定位 */
      width: 100%;
      height: 100%;
      backdrop-filter: blur(5px); /* 模糊半径 */
    }
  }

  .animal-article-box-body {
    flex: 2;
    width: 100%;

    .animal-article-box-body-container {
      width: @Common-width;
      min-height: 70vh;
      min-width: 350px;
      background-color: #ffffff;
      padding-top: 10px;

      .animal-article-row {
        margin: 0 5px 10px 5px;

        .animal-article-adopbtn {
          float: right;
          right: 10px;
          top: 0;
          width: 100px;
          height: 40px;

        }
      }

      .animal-article-fieldItem {
        margin: 10px 0 10px 0;
      }
    }
  }

  .animal-article-box-bottom {

    flex: 1;
    width: 100%;

    .animal-article-box-bottom-container {
      width: @Common-width;
      min-width: 350px;
      background-color: #ffffff;
      margin-bottom: 100px;
      padding-bottom: 50px;

      div.animal-article-box-bottom-row {
        width: 80%;
        margin-bottom: 20px;

        .animal-article-box-bottom-row-a {

        }

      }

    }
  }

  .animal-article-bottom {
    padding: 20px 0;

    border-radius: 5px;
    width: 70%;
    background-color: white;
    min-height: 800px;
    margin-bottom: 50px;

    .animal-article-comment {
      width: 80%;
    }
  }

  .menu {
    position: fixed;
    left: 5px;
    bottom: 0;
  }
}
</style>